<template>
  <div
    class="avatar"
    :class="writeClass"
  >
    <n-avatar
      bordered
      round
      :size="size"
      :src="avatarSrc"
      fallback-src="@/assets/img/avatar.png"
      color="#ecf7fd"
    />
    <div class="sm-pen" v-if="writeStatus">
      <n-icon color="#fff">
        <PencilSharp />
      </n-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  import baseAvatar from '@/assets/img/avatar.png';
  import { PencilSharp } from '@vicons/ionicons5';

  const props = defineProps({
    size: {
      type: Number,
      default: 48,
    },
    src: {
      type: String,
      default: '',
    },
    writeStatus: {
      type: Boolean,
      default: false,
    },
    isWriting: {
      type: Boolean,
      default: false,
    },
  });

  const avatarSrc = computed(() => {
    return props.src || baseAvatar;
  });

  const writeClass = computed(() => {
    const data: string[] = []
    if (props.writeStatus) {
      data.push('writing-status')
    }
    if (props.isWriting) {
      data.push('is-writing')
    }
    return data
  })
</script>

<style scoped lang="less">
.avatar{
  position: relative;
  display: flex;
}
.writing-status{
  &.is-writing{

    .n-avatar{
      border-color: #1CD0AD;
    }
    .sm-pen{
      background-color: #1CD0AD;
    }
  }

}
.sm-pen{
  width: 24px;
  height: 24px;
  position: absolute;
  background-color: #B4BBC2;
  border-radius: 50%;
  left: 50%;
  bottom: 0;
  margin-left: -12px;
  margin-bottom: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  //.i{
  //  width: 4px;
  //  height: 12px;
  //  background-color: #fff;
  //  border-top-left-radius: 2px;
  //  border-top-right-radius: 2px;
  //  position: relative;
  //  &::before{
  //    display: block;
  //    content: '';
  //    width: 0;
  //    height: 0;
  //    border-left: 2px solid transparent;
  //    border-right: 2px solid transparent;
  //    border-top: 2px solid #fff;
  //    position: absolute;
  //    top: 12px;
  //    right: 0;
  //  }
  //}
}
</style>
